<template>
  <div>
    <div  style="height: 100vh;overflow: scroll;position:relative;z-index: 99999999;">
      <pull-to
        :bottom-load-method="infiniteHandler"
        :is-top-bounce=false
        :bottom-config="BOTTOM_DEFAULT_CONFIG">
        <div class="contain" align="center">
          <span class="bacLeft"></span>
          <span class="bacRight"></span>
          <div class="super">
            <img src="../../assets/img/beforeSale.png" alt="">
          </div>
          <div class="delivery">{{number}}</div>
          <div class="reserve">抢先预定</div>
          <goodsArea :dataList="dataList" style="margin-top: -9vw;background: #53caf2;"></goodsArea>
          <div class="clear"></div>
        </div>
      </pull-to>
    </div>
  </div>
</template>

<script>
  import goodsArea from '../../components/preSale/goodsArea'
  import request from '../../request/index'
  import PullTo from 'vue-pull-to'
  export default {
    name: "preSale",
    components:{
      goodsArea,
      PullTo
    },
    data(){
      return{
        page:1,
        number:'',
        dataList:[],
        BOTTOM_DEFAULT_CONFIG: {
          pullText: "上滑继续加载",
          triggerText: "释放更新",
          loadingText: "加载中,请稍后",
          doneText: "内容已全部展示了",
          failText: "加载失败",
          loadedStayTime: 1000,
          stayDistance: 50,
          triggerDistance: 50,
        },
      }
    },
    methods:{
      infiniteHandler(loaded){
        if(!this.dataList && this.dataList !==0  && $this.dataList !== ''){
          request.getpreSale(this,loaded)
        }else{
          this.BOTTOM_DEFAULT_CONFIG.doneText = "内容已全部展示";
          loaded("done");
          this.loaded = true;
        }
      },
    },
    created(){
      request.preSale(this,this.page)
    },
    mounted(){
      document.title = "预售";
    }
  }
</script>

<style scoped lang="scss">
  .contain{
    width: 100vw;
    height: 100%;
    background: #53caf2;
    position: relative;
    z-index: 9999999;
    justify-content: center;
    .bacLeft{
      width: 90vw;
      display: inline-block;
      position: absolute;
      height: 89vw;
      background: url("../../assets/img/backgroundLeft.png");
      background-size:100% 100%;
      left: 0px;
    }
    .bacRight{
      width: 90vw;
      display: inline-block;
      position: absolute;
      height: 89vw;
      background: url("../../assets/img/backgroundRight.png");
      background-size:100% 100%;
      right: 0px;
    }
    .super{
      width: 77.33vw;
      height: 68.73vw;
      position: relative;
      z-index: 111;
      top: 4vw;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .delivery{
      width: 92vw;
      height: 14vw;
      background:url("../../assets/img/btn1.png") 100% 100%;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 24px;
      color:#fff;
      margin: 0px auto;
      line-height: 13vw;
      position: relative;
      top: -19vw;
      z-index: 222;
    }
    .reserve{
      width: 74.67vw;
      height: 17vw;
      background: url("../../assets/img/btn2.png");
      font-size: 24px;
      color: #fff;
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      margin: 0px auto;
      position: relative;
      top: -19vw;
      z-index: 333;
      line-height: 17vw;
    }
  }
</style>
